<template>
  <el-dialog
    fullscreen
    :title="title"
    :visible="open"
    append-to-body
    @close="$emit('close')"
    @open="onOpen"
  >
    <div>
      <!-- 问答题 -->
      <div
        v-for="(item, index) in otherQuestions"
        :key="item.questionId"
        class="exam-item"
      >
        <div class="exam-item-title">
          <div class="exam-no">{{ index + 1 }}.</div>
          <div style="flex:1;">{{ item.title }}</div>
          <el-input-number
            :min="0"
            :max="item.questionScore"
            style="width:140px;margin:0 10px;"
            v-model="item.score"
            placeholder="分数"
          />
          <span>分</span>
        </div>
        <div style="display:flex;">
          <span style="flex:1;">{{ item.answer }}</span>
          <span style="font-weight:bold;margin-left:10px;color: #606266;font-size: 14px;">({{item.questionScore}}分)</span>
        </div>
      </div>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button style="margin:0 20px;" type="primary" @click="onAudit"
        >批 改</el-button
      >
      <el-button @click="$emit('close')">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { review, batchUpdate } from "@/api/cms/record";
// a.match(/<u[^>]*>([\s\S]*?)<\/u>/g)
// a.replace(/<u[^>]*>([\s\S]*?)<\/u>/g,"�")
const reg = /<u[^>]*>([\s\S]*?)<\/u>/g;

export default {
  components: {},
  filters: {
    filterIndexToABC(index) {
      return String.fromCharCode(65 + index);
    }
  },
  props: {
    sid: {
      type: String | Number,
      default: ""
    },
    scoreId: {
      type: String | Number,
      default: ""
    },
    eid: {
      type: String | Number,
      default: ""
    },
    open: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: "考试问答题批改"
    }
  },
  data() {
    return {
      checkList: [],
      active: 0,
      form: {
        title: "试卷",
        source0: 10,
        source1: 10,
        source2: 10,
        times: [],
        count: 1,
        time: 50,
        timeType: 0,
        countType: 0,
        desc: ""
      },
      questions: [
        // {
        //   type: 0,
        //   title: "我我去",
        //   options: [
        //     {
        //       label: "请问",
        //       checked: false
        //     },
        //     {
        //       label: "请问",
        //       checked: false
        //     },
        //     {
        //       label: "安慰请问",
        //       checked: false
        //     },
        //     {
        //       label: "我去我去我",
        //       checked: false
        //     }
        //   ]
        // },
        // {
        //   type: 1,
        //   title: "<p>我请我�请问我我请问我�我请问我问�我</p>",
        //   titles: ["我我去问", "�", "我去问请问我"],
        //   values: []
        // },
        // {
        //   type: 2,
        //   title: "请问"
        // }
      ],
      cmsExamRecordList: [],
      otherQuestions: []
    };
  },
  created() {},
  methods: {
    onOpen() {
      review({
        examId: this.eid,
        userId: this.sid,
        pageSize: 100,
        pageNum: 1
      }).then(res => {
        this.otherQuestions = res.rows.filter(x => x.type == 2 && x.scoreId==this.scoreId);
        this.cmsExamRecordList = res.rows.filter(x => x.scoreId==this.scoreId).map(x => {
          if (x.type != 2) {
            if (x.answer == x.questionAnswer) {
              x.score = x.questionScore;
            } else {
              x.score = 0;
            }
          }
          return x;
        });
        if (this.otherQuestions.length == 0) {
          this.onAudit();
        }
      });
    },
    onSubmit() {},
    submitForm() {},
    cancel() {},
    onAudit() {
      if (
        this.cmsExamRecordList
          .filter(x => x.type == 2)
          .some(x => x.score == null || x.score == undefined)
      ) {
        this.$message.error("请填写所有题目分数");
        return false;
      }
      batchUpdate({
        cmsExamRecordList: this.cmsExamRecordList.map(x => {
          return {
            ...x,
            score: x.score
          };
        }),
        examId: this.eid,
        userId: this.sid,
        scoreId: this.scoreId
      }).then(res => {
        if (this.otherQuestions.length == 0) {
          this.$message.success("自动批改成功");
        } else {
          this.$message.success("批改成功");
        }

        this.$emit("close");
      });
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep {
  .el-dialog__body {
    height: calc(100% - 55px - 66px) !important;
    overflow-y: scroll;
  }
}

.exam-box {
  display: flex;
  flex-direction: column;
  height: 100%;
  .exam-body {
    flex: 1;
  }
}
.exam-content {
  display: flex;
  align-items: flex-start;
  .exam-content-right {
    width: 200px;
    border-radius: 10px;
    border: 1px solid #ccc;
  }
  .exam-content-left {
    flex: 1;
  }
}
.exam-item {
  border: 1px solid #ccc;
  margin-bottom: 20px;
  border-radius: 20px;
  padding: 20px;
  .exam-item-title {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-weight: bold;
    .exam-no {
      margin-right: 10px;
      font-size: 18px;
      // color: #000;
      color: #0a84ff;
      font-style: italic;
      font-weight: 700;
    }
  }
  .exam-item-value {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
  .exam-item-select {
    display: flex;
    align-items: center;
    width: 250px;
  }
}
</style>
